<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" href="../assets/img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>
		登录
	</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<!--     Fonts and icons     -->
	<link href="../assets/css/fonts.css" rel="stylesheet" />
	<link rel="stylesheet" href="../assets/css/new_file.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
	 crossorigin="anonymous">
	<!-- CSS Files -->
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="../assets/demo/demo.css" rel="stylesheet" />

	<script src="../assets/js/axios-min.js"></script>
	<script src="../assets/js/vue.js"></script>
	<script src="../assets/js/vue-axios.js"></script>
</head>
<body class="login-page sidebar-collapse">
	<div id="app">
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="navbar-translate">
				<span></span>
				<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
				 aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-bar top-bar"></span>
					<span class="navbar-toggler-bar middle-bar"></span>
					<span class="navbar-toggler-bar bottom-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="register.html" style="font-size: 18px;">注册</a>
					</li>
					
				</ul>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="page-header clear-filter" filter-color="orange">
			<div class="page-header-image" style="background-image:url(../assets/img/4ae5dbb7g009716ade21b&690.jpg)"></div>
			<div class="content">
				<div class="container">
					<div class="col-md-4 ml-auto mr-auto">

						<div class="card card-login card-plain">

							<h2>个人博客登录</h2>

							<form action="">
								<div class="card-body">
									<div class="input-group no-border input-lg">
										<div class="input-group-prepend">
											<span class="input-group-text">
												<i class="now-ui-icons users_circle-08"></i>
											</span>
										</div>
										<input type="text" v-model="username" class="form-control" placeholder="用户名" style="font-size: 14px;">
									
									</div>
									<div class="input-group no-border input-lg">
										<div class="input-group-prepend">
											<span class="input-group-text">
												<i class="now-ui-icons text_caps-small"></i>
											</span>
										</div>
										<input type="password" v-model="password" placeholder="密码" class="form-control" style="font-size: 14px;" />
									</div>
								</div>
								<a class="btn btn-primary btn-round btn-lg btn-block" @click="submit()">提交</a>
								
							</form>
							
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>


	<!--   Core JS Files   -->
	<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
	<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
	<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
	<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
	<script src="../assets/js/plugins/bootstrap-switch.js"></script>
	<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
	<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
	<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
	<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
	<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
	<script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
	<script>
		// var params = new URLSearchParams();
		// params.append('username', this.username);
		//  params.append('password',this.password);
		//  axios.post('/test/LoginServlet',params)
		//                     .then(response => (this.Datas = response.data.json.userMaps))
		//                     .catch(error => console.log(error))

		new Vue({
			el: '#app',
			data() {
				return {
					
					username:'',
					password:'',
					code:'1',
				}
			},
			mounted() {
				
			},
			methods: {
				submit() {
					axios.get('/test/LoginServlet',{
					        params: {
							  username: this.username,
							  password:this.password
					        }
					      })
					      .then((response) => {
					        console.log(response.data);//请求的返回体
					        this.code = response.data.code;
					        if (this.code==1) {
						        alert("登录成功！！！");
						        window.location.href='/test/view/main.html'; 
						      }
					        if(this.code==0){
					        	alert("用户名或密码错误。。。");
						        window.location.href='/test/view/login.html'; 
					        }
					       
					      })
					      .catch((error) => {
					        console.log(error);//异常
					 });
				
				},
				
			}

		})
	</script>
</body>
</html>
